@* 皮肤信息内容 *@

<style>
    /* 皮肤页面专用样式 */
    .skin-container {
        padding: 10px;
    }
    
    .skin-layout {
        display: flex;
        gap: 20px;
    }
    
    .skin-image-section {
        width: 400px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 20px 0;
    }
    
    .skin-image {
        width: 380px;
        height: auto;
    }
    
    .skin-tables-section {
        flex: 1;
    }
    
    .search-section {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }
    
    .search-section select {
        width: 150px;
        height: 28px;
        margin: 0 5px;
    }
    
    .search-section button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 5px 15px;
        cursor: pointer;
        margin-left: 10px;
    }
    
    .table-title {
        background-color: #f8f9fa;
        padding: 8px 12px;
        margin-top: 15px;
        margin-bottom: 10px;
        border-left: 3px solid #28a745;
        font-size: 14px;
        font-weight: bold;
    }
    
    .skin-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        font-size: 12px;
    }
    
    .skin-table th,
    .skin-table td {
        border: 1px solid #e0e0e0;
        padding: 6px 4px;
        text-align: center;
        height: 28px;
    }
    
    .skin-table th {
        background-color: #e9ecef;
        font-weight: bold;
        color: #495057;
    }
    
    .skin-table tr:nth-child(even) {
        background-color: #fafafa;
    }
    
    /* 可点击行样式 */
    .skin-table tbody tr {
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .skin-table tbody tr:hover {
        background-color: #e3f2fd !important;
    }
    
    .skin-table tbody tr:active {
        background-color: #bbdefb !important;
    }
    
    /* 修复内容区域样式 */
    .charts-container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .chart-card {
        border: none !important;
        box-shadow: none !important;
    }
    
    .chart-content {
        padding: 0 !important;
    }
</style>

<div class="charts-container">
    <div class="chart-card">
        <div class="chart-content">
            <div class="skin-container">
                <div class="skin-layout">
                    <!-- 左侧图片区域 -->
                    <div class="skin-image-section">
                        <img src="/img/muscle_anatomy.png" alt="人体解剖图" class="skin-image">
                    </div>
                    
                    <!-- 右侧表格区域 -->
                    <div class="skin-tables-section">
                        <!-- 日期检索栏 -->
                        <div class="search-section">
                            <input type="date" id="startDate" value="2025-11-07" style="width: 150px; height: 28px; margin: 0 5px; padding: 0 5px; border: 1px solid #ced4da; border-radius: 4px;">
                            <span>-</span>
                            <input type="date" id="endDate" value="2025-11-07" style="width: 150px; height: 28px; margin: 0 5px; padding: 0 5px; border: 1px solid #ced4da; border-radius: 4px;">
                            <button style="background-color: #dc3545; color: white; border: none; padding: 6px 15px; cursor: pointer; margin-left: 10px; border-radius: 4px;">检索</button>
                        </div>
                        
                        <script>
                            // 初始化日期选择器，设置最大日期为今天
                            document.addEventListener('DOMContentLoaded', function() {
                                const today = new Date().toISOString().split('T')[0];
                                const startDate = document.getElementById('startDate');
                                const endDate = document.getElementById('endDate');
                                
                                // 设置最大可选日期为今天
                                startDate.max = today;
                                endDate.max = today;
                                
                                // 确保开始日期不晚于结束日期
                                startDate.addEventListener('change', function() {
                                    if (startDate.value > endDate.value) {
                                        endDate.value = startDate.value;
                                    }
                                });
                                
                                // 确保结束日期不早于开始日期
                                endDate.addEventListener('change', function() {
                                    if (endDate.value < startDate.value) {
                                        startDate.value = endDate.value;
                                    }
                                });
                            });
                            
                            // 处理压疮信息行点击
                            function handlePressureUlcerClick(id) {
                                // 这里可以添加点击后的处理逻辑，比如打开详情页面或显示模态框
                                console.log('压疮信息被点击，ID:', id);
                                alert('查看压疮信息详情，ID: ' + id);
                                // 实际项目中可能会导航到详情页面或打开模态框
                                // window.location.href = '/Patients/PressureUlcerDetail?id=' + id;
                            }
                            
                            // 处理非压疮信息行点击
                            function handleNonPressureUlcerClick(id) {
                                // 这里可以添加点击后的处理逻辑，比如打开详情页面或显示模态框
                                console.log('非压疮信息被点击，ID:', id);
                                alert('查看非压疮信息详情，ID: ' + id);
                                // 实际项目中可能会导航到详情页面或打开模态框
                                // window.location.href = '/Patients/NonPressureUlcerDetail?id=' + id;
                            }
                        </script>
                        
                        <!-- 压疮信息表格 -->
                        <div class="table-title">压疮信息</div>
                        <table class="skin-table">
                            <thead>
                                <tr>
                                    <th style="width: 5%;">Id</th>
                                    <th style="width: 10%;">添加时间</th>
                                    <th style="width: 8%;">面积</th>
                                    <th style="width: 8%;">来源</th>
                                    <th style="width: 8%;">部位</th>
                                    <th style="width: 8%;">压疮分期</th>
                                    <th style="width: 8%;">窦道深度</th>
                                    <th style="width: 8%;">窦道方向</th>
                                    <th style="width: 8%;">创面颜色</th>
                                    <th style="width: 8%;">性状</th>
                                    <th style="width: 8%;">分泌物量</th>
                                    <th style="width: 8%;">张力</th>
                                    <th style="width: 8%;">潜行</th>
                                    <th style="width: 8%;">气味</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr onclick="handlePressureUlcerClick('*')">
                                    <td>*</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <!-- 非压疮信息表格 -->
                        <div class="table-title">非压疮信息</div>
                        <table class="skin-table">
                            <thead>
                                <tr>
                                    <th style="width: 8%;">Id</th>
                                    <th style="width: 12%;">添加时间</th>
                                    <th style="width: 10%;">部位</th>
                                    <th style="width: 10%;">皮肤类型</th>
                                    <th style="width: 10%;">面积</th>
                                    <th style="width: 10%;">颜色</th>
                                    <th style="width: 10%;">分泌物量</th>
                                    <th style="width: 10%;">潜行</th>
                                    <th style="width: 10%;">气味</th>
                                    <th style="width: 10%;">周围皮肤</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr onclick="handleNonPressureUlcerClick('*')">
                                    <td>*</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



